<template>
    <el-container v-loading="loading">
      <el-main>
        <div class="title sa-m-b-16">推流地址</div>
        <div class="sa-flex sa-m-b-4">
          <div class="desc sa-m-r-4">在第三方推流应用中，以下地址进行推流</div>
          <el-button class="is-link" type="primary" @click="onCopy">复制链接</el-button>
        </div>
        <div class="desc sa-m-b-16">{{ state.pushUrl }}</div>
        <div class="subtitle sa-m-b-40">此地址为当前直播间唯一推流地址，不要泄露给第三方。</div>
        <div class="title sa-m-b-16">备注</div>
        <div class="desc sa-m-b-4">服务器地址：{{ state.serverAddress }}</div>
        <div class="desc sa-m-b-16">串流密钥：{{ state.key }}</div>
        <div class="sa-flex">
          <div class="subtitle sa-m-r-4">推流直播操作详见</div>
          <el-button class="is-link" type="primary" @click="onJump">指引</el-button>
        </div>
      </el-main>
    </el-container>
  </template>
  <script setup>
    import { api } from '../../app.service';
    import handleClipboard from '@/sheep/utils/clipboard';
    import { onMounted, reactive, ref } from 'vue';
  
    const props = defineProps({
      modal: {
        type: Object,
      },
    });
    const loading = ref(false);
    const state = reactive({
      pushUrl: '', // 推流地址
      serverAddress: '', // 服务器地址
      key: '', // 串流密钥
    });
    async function getDetail(id) {
      loading.value = true;
      const { error, data } = await api.mplive.room.pushUrl(id);
      if (error === 0) {
        state.pushUrl = data.pushAddr;
        state.serverAddress = state.pushUrl.split('/live/')[0] + '/live/';
        state.key = state.pushUrl.split('/live/')[1];
      }
      loading.value = false;
    }
  
    async function init() {
      if (props.modal.params.id) {
        await getDetail(props.modal.params.id);
      }
    }
    //复制推流地址
    function onCopy() {
      handleClipboard(state.pushUrl);
    }
  
    function onJump() {
      window.open('https://docs.qq.com/doc/DV0hoWHZRdm9oT2pp');
    }
  
    onMounted(() => {
      init();
    });
  </script>
  <style lang="scss" scoped>
    .title {
      font-size: 16px;
      line-height: 24px;
      color: var(--sa-title);
    }
    .desc {
      font-size: 14px;
      line-height: 20px;
      color: var(--sa-subtitle);
      word-break: break-all;
      word-wrap: break-word;
    }
    .subtitle {
      color: var(--sa-subfont);
      font-size: 14px;
      line-height: 20px;
    }
  </style>
  